<template>
  <Modal :width="1000"
    v-model="visible"
         :title="dataForm.id ? '编辑文章' : '新增文章'"
         :closable="false"
         :mask-closable="false">
    <Form ref="dataForm" :model="dataForm" :rules="ruleValidate" :label-width="80">
      <FormItem label="标题" prop="title">
        <Input v-model="dataForm.title" placeholder="请输入栏目名" clearable></Input>
      </FormItem>
      <FormItem label="状态" prop="name">
        <Select v-model="dataForm.type" style="width:200px">
          <Option  :value="1" :key="1">草稿</Option>
          <Option  :value="2" :key="2">发布</Option>
        </Select>
      </FormItem>
      <FormItem label="正文" prop="content">
        <quill-editor v-model="dataForm.content" ref="myQuillEditor" class="editor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
        </quill-editor>
      </FormItem>
    </Form>
    <!--:show-upload-list="false"-->
    <Upload multiple
            type="drag" :action=uploadFile  name="upFile" :data="dataForm">
      <div style="padding: 20px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>选择或拖拽上传您的标题图片O(∩_∩)O</p>
      </div>
    </Upload>
    <div slot="footer" style="padding-top: 50px">
      <Button type="text" @click="handleCancel">取消</Button>
      <Button type="primary" :loading="showLoading" @click="handleSubmit">保存</Button>
    </div>
  </Modal>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{'direction': 'rtl'}], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  // 链接、图片、视频-----['link', 'image', 'video']
  ['image', 'video', 'link']
]
export default {

  data () {
    return {
      uploadFile: this.$http.adornUrl('/picture/save'),
      visible: false,
      disablePassword: true,
      showLoading: false,
      roleList: [],
      editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      dataForm: {
        id: 0,
        title: '',
        content: '',
        type: 1
      },
      ruleValidate: {
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  components: { quillEditor },
  methods: {
    init (id) {
      // add or update
      this.$refs['dataForm'].resetFields();
      // 清空角色id列表
      // this.dataForm.roleIdList.splice(0, this.dataForm.roleIdList.length);
      this.visible = true;
      this.dataForm.id = id || 0;
      this.$http({
        url: this.$http.adornUrl('/sys/role/select'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        const roles = data && data.code === 0 ? data.list : [];
        roles.forEach((item) => {
          item.color = 'default';
        });
        this.roleList = roles;
      }).then(() => {
        if (this.dataForm.id) {
          this.disablePassword = false;
          // 根据id获取详情
          this.$http({
            url: this.$http.adornUrl(`/article/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.content = data.article.content;
              this.dataForm.title = data.article.title;
              this.dataForm.type = data.article.type;
            }
          })
        }
      })
    },
    onEditorBlur () {
      // 失去焦点事件
    },
    onEditorFocus () {
      // 获得焦点事件
    },
    onEditorChange () {
      // 内容改变事件
    },
    handleCheck (item, index) {
      if (this.$refs.roleTag[index].name === item.roleName) {
        if (this.roleList[index].color === '#cca4e3') {
          /* 选中状态，改为未选中，并且展示菜单详情 */
          this.roleList[index].color = 'default';
          // this.dataForm.roleIdList.pop();
        } else {
          /* 未选中状态，先选中 */
          this.roleList[index].color = '#cca4e3';
        }
      }
    },
    handleCancel () {
      this.visible = false;
      this.disablePassword = true;
      this.showLoading = false;
      this.$emit('refreshDataList')
    },
    handleSubmit () { // 表单提交
      let bl = new Blob([this.dataForm.content]);
      let size = Math.round(bl.size / 1024);
      // 计算文章正文的大小
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.showLoading = true;
          // 清空roleIdList
          this.dataForm.roleIdList = [];
          // 获取角色id列表
          this.roleList.forEach((item) => {
            if (item.color === '#cca4e3' && this.dataForm.roleIdList.indexOf(item.roleId) === -1) {
              this.dataForm.roleIdList.push(item.roleId);
            }
          });
          this.$http({
            url: this.$http.adornUrl('/sys/config/getVerifySize?thisSize=' + size),
            method: 'get'
          }).then(({data}) => {
            if (data.res === true) {
              this.$http({
                url: this.$http.adornUrl(`/article/${this.dataForm.id ? 'update' : 'save'}`),
                method: 'post',
                data: this.$http.adornData({
                  'id': this.dataForm.id || undefined,
                  'title': this.dataForm.title,
                  'content': this.dataForm.content,
                  'type': this.dataForm.type
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$Message.success({
                    content: '操作成功',
                    duration: 2,
                    onClose: () => {
                      this.handleCancel();
                      this.$emit('refreshDataList')
                    }
                  });
                } else {
                  this.$Message.error(data.msg);
                  this.showLoading = false;
                }
              })
            } else {
              this.$Message.error('当前文档大小超过设置大小限制！');
              this.showLoading = false;
            }
          })
        }
      })
    }
  }
}
</script>
<style>
  .editor {
    line-height: normal !important;
    height: 400px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
</style>
